<template>
  <div class="epub">
    <!-- 顶部菜单栏 -->
    <transition
      name="top-bar-transition"
      enter-active-class="animated slideInDown"
      leave-active-class="animated slideOutRight"
    >
      <TopBar v-show="isShowTitleAndMenu" />
    </transition>
    <!-- epub 电子书区域 -->
    <div class="epub-box">
      <div id="epub-wrapper"></div>
      <!-- 翻页布局 -->
      <div class="pagination">
        <div class="left" @click="goPage('prev')"></div>
        <div class="middle" @click="toggleTitleAndMenu"></div>
        <div class="right" @click="goPage('next')"></div>
      </div>
    </div>
    <!-- 底部菜单栏 -->
    <transition
      name="bottom-bar-transition"
      enter-active-class="animated slideInUp"
      leave-active-class="animated slideOutRight"
    >
      <MenuBar
        v-show="isShowTitleAndMenu"
        :isShowTitleAndMenu="isShowTitleAndMenu"
        :bgColorArr="bgColorArr"
        :bookAvailable="bookAvailable"
      />
    </transition>
    <!-- 目录 -->
     <transition
      name="dictionary-transition"
      enter-active-class="animated slideInLeft"
      leave-active-class="animated slideOutLeft"
    >
     <div
      class="dictionary-box"
      v-show="showDictionary"
      @click="hideAllMenu"
    >
       <SetDictionary :toc="toc" />
     </div>
    </transition>
  </div>
</template>

<script>
  import ePub from 'epubjs';
  import TopBar from '@/components/TopBar.vue';
  import MenuBar from '@/components/MenuBar.vue';
  import SetDictionary from '@/components/SetDictionary.vue';
  import EventEmitter from '@/utils';

  export default {
    data () {
      return {
        // 使用vue-cli@3.x，这里的epub资源必须放在public下面，使用'/'根路径进行加载
        bookUrl: '/epub-books/myBook1.epub',
        isShowTitleAndMenu: false,
        bgColorArr: [{
          name: 'default',
          style: {
            body: {
              color: '#000',
              'background-color': '#fff',
            }
          }
        }, {
          name: 'eye',
          style: {
            body: {
              color: '#000',
              'background-color': '#cee',
            }
          }
        }, {
          name: 'night',
          style: {
            body: {
              color: '#fff',
              'background-color': '#000',
            }
          }
        }, {
          name: 'glod',
          style: {
            body: {
              color: '#000',
              'background-color': 'rgb(241, 236, 226)',
            }
          }
        }],
        bookAvailable: false,
        showDictionary: false,
        toc: [],
      }
    },
    components: {
      TopBar,
      MenuBar,
      SetDictionary,
    },
    methods: {
      showEpub () {
        // 解析epub电子书，生成Book对象
        this.book = ePub(this.bookUrl);
        // 渲染电子书
        this.rendition = this.book.renderTo("epub-wrapper", {
          method: 'default',
          // 移动端这里使用‘视图布局’的with和height，即window.innerWidth和window.innerHeight
          width: window.innerWidth,
          height: window.innerHeight,
        });
        // 进行视图展示
        this.rendition.display();
        // 获取thems对象设置字号和背景
        this.themes = this.rendition.themes;
        // 注册主题
        this.registerTheme();
        // 生成location对象
        this.locations = this.book.locations;
        // 初始化目录和进度信息
        this.initLocations();
      },
      registerTheme () {
        this.bgColorArr.forEach(ele => {
          this.themes.register(ele.name, ele.style);
        })
      },
      initLocations () {
        this.book.ready.then(() => {
          // 生成目录
          const navigation = this.book.navigation;
          this.toc = navigation.toc;
          // 生成Locations对象
          this.locations = this.book.locations;
          // 解析电子书
          return this.locations.generate();
        }).then(result => {
          // 标记电子书为解析完毕状态
          this.bookAvailable = true;
        })
      },
      goPage (type) {
        if (this.rendition) {
          // 上一页
          if (type === 'prev') this.rendition.prev();
          // 下一页
          else if (type === 'next') this.rendition.next();
        }
      },
      toggleTitleAndMenu () {
        this.isShowTitleAndMenu = !this.isShowTitleAndMenu;
      },
      hideAllMenu () {
        this.showDictionary = false;
        this.isShowTitleAndMenu = false;
      },
    },
    mounted () {
      this.showEpub();
      // 设置目录
      EventEmitter.on('setDictionary', () => {
        this.showDictionary = true;
      });
      EventEmitter.on('setGoChapter', (href) => {
        this.rendition && this.rendition.display(href);
      })
      // 设置字号
      EventEmitter.on('setFontSize', (size) => {
        this.themes && this.themes.fontSize(`${size}px`);
      });
      // 设置主题
      EventEmitter.on('setBgColor', (name) => {
        this.themes && this.themes.select(name);
      });
      // 设置进度条
      EventEmitter.on('setProgress', (num) => {
        // 定义百分比数值
        let progressVal = 0;
        if (num > 0) {
          const percent = num / 100;
          progressVal = this.locations.cfiFromPercentage(percent);
        }
        this.rendition && this.rendition.display(progressVal);
      });
    },
  }
</script>

<style scoped lang="scss">
.epub {
  position: relative;
  .epub-box {
    position: relative;
    .pagination {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      box-sizing: border-box;
      display: flex;
      .left,
      .right {
        width: 15%;
      }
      .middle {
        flex: 1;
      }
    }
  }
  .dictionary-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(0, 0, 0, .3);
  }
}
</style>